import {Button, Flex, Form, Input, Typography} from "antd";
import {Link} from "react-router";
import {useState} from "react";
import { useDispatch} from 'react-redux';
import { saveToLocalStorage } from '../redux/localStorage.js';
import store from "../redux/store.js";

const cardStyle = {
    backgroundColor: '#fff',
    textAlign: 'center',
    padding: '0 50px',
    width: '400px',
}
const layoutStyle = {
    overflow: 'hidden',
    width: '100%',
    minHeight: '100vh',
    background: '#F0F2F5',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
};

const Register = () => {
    const [isDisabled, setIsDisabled] = useState(false);
    const [count, setCount] = useState(0);

    const dispatch = useDispatch();

    const onFinish = (values) => {
        const userData = {
            username: values.username,
            password: values.password,
            phonenumber: values.phonenumber,
        };

        dispatch({
            type:'SET_USER_DATA',
            payload:userData,
        })
        saveToLocalStorage('userData',store.getState());
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const getVerCode = () =>{
        setIsDisabled(true);
        setCount(30);
        const interval = setInterval(() => {
            setCount(prevCount =>{
                if(prevCount <= 1){
                    clearInterval(interval)
                    setIsDisabled(false);
                    return 0
                }
                return prevCount - 1;
            })
        },1000)
    }

    return (
        <div style={layoutStyle}>
            <Form
                name="basic"
                style={cardStyle}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item>
                    <Typography.Title style={{color:"#717171"}} level={4}>注册</Typography.Title>
                </Form.Item>
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '用户名由数字和英文字母(不区分大小写)组成，不超过6个字符',
                            pattern: /^[a-zA-Z0-9]{1,6}$/,
                        }
                    ]}
                >
                    <Input placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item
                    name="phonenumber"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的11位手机号',
                            pattern: /^1[3-9]\d{9}$/,
                        }
                    ]}
                >
                    <Input placeholder="请输入手机号" />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: "请输入6位数字验证码",
                            pattern: /^[0-9]{6}$/,
                        }
                    ]}
                >
                    <Flex justify="space-between" align="center" gap={10}>
                        <Input placeholder="请输入验证码" />
                        <Button type="primary"
                                onClick={getVerCode}
                                disabled={isDisabled}
                        >{isDisabled? `${count}秒后重新获取`:'获取验证码'}</Button>
                    </Flex>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符；',
                            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,

                        },
                    ]}
                >
                    <Input.Password placeholder="请输入密码" />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{width:'100%'}}>
                        立即注册
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Flex justify="space-between" align="center">
                        <Link to="../forgetpassword">忘记密码</Link>
                        <p>没用账户？<Link to="../login">马上登录</Link></p>
                    </Flex>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Register;